<template>
  <div class="register">
    <van-nav-bar
      title="上传资料"
      left-text="返回"
      left-arrow
      :fixed="true"
      :placeholder="true"
      @click-left="$router.back(-1)"
    >
      <!-- <template #right>
        <van-icon
          name="question-o"
          size="18"
          @click="$router.push('/auxiliary')"
        />
      </template> -->
    </van-nav-bar>
    <div class="tips-tips ">*为必填项</div>
    <van-form class="folder" @submit="onSubmit($route.params.type)">
      <Natural :natural_data="natural_data" />
      <Shop v-if="$route.params.type === 'shop'" :shop_data="shop_data" />
      
      <div class="agreement">
      <van-checkbox
          v-model="checked"
          checked-color="#378754"
          class="check"
          icon-size="18"
          >请认真阅读并同意
          <span class="clause" @click="$router.push('/contract/pic1')">《微店资质及入住流程》</span><br/>
          </van-checkbox
        >
         <span class="clause" @click="$router.push('/contract/pic2')">《微店推广合同书》</span>
        
          
      </div>
      <van-button class="register-button" v-if="loading">
        提交审核
        <van-loading class="loading" color="#fff" size="20px"></van-loading>
      </van-button>
      <van-button v-else class="register-button" native-type="submit">
        提交审核
      </van-button>
      
    </van-form>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { Apply } from "@/api/user";
import Natural from "@/components/user/register/natural";
import Shop from "@/components/user/register/shop";
export default {
  components: {
    Natural,
    Shop,
  },
  setup() {
    const data = reactive({
      natural_data: {
        member_id: "",
        boss_name: "",
        boss_phonenum: "",
        boss_address: "",
        boss_idnum: "",
        boss_idfile1: "",
        boss_idfile2: "",
        boss_idcard1: [],
        boss_idcard2: [],
        boss_idcard3: [],
        pickPicture1: () => {
          if (navigator.userAgent.indexOf("haiguang_mobile") > -1) {
            window.pickPictureResult = (picBase64String) => {
              alert("11111");
              //data.natural_data.boss_idcard1[0] = {url:"data:image/jpg;base64," + picBase64String,isImage: true,content:"data:image/jpg;base64," + picBase64String};
            };
            // window.location = "higuang|avatarPickPicture";
          }
        },
        pickPicture2: () => {
          if (navigator.userAgent.indexOf("haiguang_mobile") > -1) {
            window.pickPictureResult = (picBase64String) => {
              data.natural_data.boss_idcard2[0] = {url:"data:image/jpg;base64," + picBase64String,isImage: true,content:"data:image/jpg;base64," + picBase64String};
            };
            window.location = "higuang|pickPicture";
          }
        },
        pickPicture3: () => {
          if (navigator.userAgent.indexOf("haiguang_mobile") > -1) {
            window.location = "higuang|pickPicture";
            window.pickPictureResult = (picBase64String,a) => {
              alert("picBase64String的长度是");
              alert(a);
              data.natural_data.boss_idcard3[0] = {url:"data:image/jpg;base64," + picBase64String,isImage: true,content:"data:image/jpg;base64," + picBase64String};
            };
          }
        },
        address: "",
        areaDetail: "",
      },
      shop_data: {
        certification_name: "",
        certification_type: "",
        certification_address: "", //资质申请住所
        certification_legalrepresentative: "", //资质法人代表
        certification_endtime: "", //营业执照期限
        certification_img: "",
        certification: [], //营业执照图片
        pickPicture4: () => {
          if (navigator.userAgent.indexOf("haiguang_mobile") > -1) {
            window.pickPictureResult = (picBase64String) => {
              data.shop_data.certification[0] = {url:"data:image/jpg;base64," + picBase64String,isImage: true,content:"data:image/jpg;base64," + picBase64String};
            };
            window.location = "higuang|pickPicture";
          }
        },
        note: "", //备注
        addname: "",
        bankcardno: "", //卡号
        bankname: "", //银行名称
        bankofdeposit: "", //开户行
        bankarea: "", //银行地市
      },
      checked:false,
      loading: false,
    });

    const router = useRouter();
    const store = useStore();
    const onSubmit = async (values) => {
      if(!data.checked){
        Toast("请勾选协议!");
        return;
      }
      let register_data = {
        member_id: store.state.userInfo.F_UserId, //店主会员ＩＤ
        apply_type: 1, //申请类型
        boss_name: data.natural_data.boss_name, //店主姓名
        boss_phonenum: data.natural_data.boss_phonenum, //手机号
        boss_address: data.natural_data.address + data.natural_data.areaDetail, //地址
        boss_idnum: data.natural_data.boss_idnum, //身份证号
        boss_idfile1: data.natural_data.boss_idcard1[0].content.split(",")[1], //身份正面
        boss_idfile2: data.natural_data.boss_idcard2[0].content.split(",")[1], //身份反面
        // boss_idfile3: data.natural_data.boss_idcard3[0].content.split(",")[1], //手持身份证照片
         boss_idfile3: '', //手持身份证照片
      };
      if (values == "shop") {
        const register_shop = {
          certification_name: data.shop_data.certification_name, //资质名称
          certification_type: "营业执照", //资质类型
          certification_address: data.shop_data.certification_address, //资质申请住所
          certification_legalrepresentative: data.shop_data.certification_legalrepresentative, //资质法人代表
          certification_endtime: data.shop_data.certification_endtime, //营业执照期限
          certification_img:data.shop_data.certification[0].content.split(",")[1], //营业执照图片
          // note: data.shop_data.note, //备注
          addname: store.state.userInfo.F_Account,
          bankcardno: data.shop_data.bankcardno, //卡号
          bankname: data.shop_data.bankname, //银行名称
          bankofdeposit: data.shop_data.bankofdeposit, //开户行
          bankarea: data.shop_data.bankarea, //银行地市
        };
        register_data.apply_type = 2;
        register_data = Object.assign(register_data, register_shop);
      }
      // console.log(register_data);
      data.loading = true;
          const res= await Apply({ certification: register_data });
            data.loading = false;
           if(res[0]){
            Toast("提交成功!");
          router.push("/user");
           }
          if(res[1]==406){
            Toast("图片过大，上传失败，请重新选取图片！");
          }
      
    };
    return { ...toRefs(data), onSubmit };
  },
};
</script>
<style lang="scss" scoped>
@import "@/common/style/mixin";
.register {
  background: #f7f8fa;
  min-height: 100vh;
  .bg-img {
    position: fixed;
    top: 0;
    .back {
      line-height: 5.4rem;
      top: 3rem;
      left: 2rem;
      padding: 0 1rem;
      font-size: 1.8rem;
      color: rgb(22, 22, 22);
    }
  }
  .register-button {
    border: none;
    padding: 1rem;
    border-radius: 2rem;
    width: 60%;
    background: $green;
    color: #fff;
    font-size: 1.5rem;
    margin: 2rem 0;
    .loading {
      display: inline;
    }
  }
  
}
.agreement {
      font-size: 1.2rem;
      // margin:0 1rem 2rem;
      
      .check{
        justify-content: center;
        
      }
      .clause{
          color: #40a2ff;
      }
    }
    .tips-tips {
      color: red;
      padding: 1rem 2rem 0;
      text-align: left;
    }
</style>